import React, {Component} from 'react';
import {RefreshControl, View, FlatList} from 'react-native';
import {Container, Content, List, ListItem, Left, Body, Right, Thumbnail, Text} from 'native-base';
import Nav from './Nav';
import GroupDropdown from './GroupDropdown';
import Icon from '../../../../components/Icon';
import DoubleExitApp from '../LoginPage/DoubleExitApp';
import {themeColor, themTextColor} from '../../../../config/config';
import {connect} from 'react-redux';

@connect(state => ({state: {...state.home}}))
class Group extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		let {tab, groupList} = state;
		let groupItemNodes = [];
		if(groupList && groupList.length > 0) {
			for(let group of groupList) {
				groupItemNodes.push(
					<ListItem key={group.groupId} avatar onPress={() => {
						dispatch({type: 'home/toGroupChat'});
					}}>
		              	<Left>
		                	<Thumbnail source={{uri: (group.groupIconFile.fileThumbnailUrl || group.groupIconFile.fileUrl)}} />
		              	</Left>
		            	<Body>
		            		<Text>{group.groupName}</Text>
		            		<Text note>{group.description}</Text>
		            	</Body>
		            	<Right>
		            		<Text note>3:43 ps</Text>
		            	</Right>
		            </ListItem>
				);
			}
		}
		return (
			<Container>
				<DoubleExitApp />
				<Nav title='群组' hiddenBack={true} rightContent={<GroupDropdown />} />
				<Content refreshControl={
		          	<RefreshControl 
			            refreshing={state.groupListRefresh}
			            onRefresh={() => {
			            	dispatch({
			            		type: 'home/listGroupByUserId'
			            	});
			            }} 
			            tintColor={themeColor()} 
			            title='加载中...' 
			            titleColor={themeColor()} 
			            colors={[themeColor()]}
			            progressBackgroundColor='#ffffff' 
		          	/>
			    }>
			    	{/*
			    	<FlatList
						data={[{key: 'a'}, {key: 'b'}]}
						renderItem={({item}) => <Text>{item.key}</Text>}
					/>
					*/}
		        	<List>
			            {groupItemNodes}
		        	</List>
		        	
		        </Content>
	        </Container>
		);
	}
	
	componentDidMount() {
  		this.props.dispatch({type: 'home/listGroupByUserId'});
	}
	
	shouldComponentUpdate({state}) {
		if(this.props.state.tab != state.tab) {
			return false;
		}
		return true;
	}
	
}

export default Group;
